<template>
    <div>
        <search @change="keywordChange" :word="hotWordName"></search>
        <association :list="keywords" @select="select"></association>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import Search from './search.vue'
import Association from './associationList.vue'
import './css/search.scss'
export default {
    computed: {
        ...mapState({
            keywords: function(state) {
                return state.search.association
            },
            hotWordName: function(state) {
                return state.home.hotWord
            }
        })
    },
    mounted() {
    },
    methods: {
        keywordChange(searchWord) {
            this.GetAssociation(searchWord)
        },
        select(searchWord) {
            this.$router.push({path: 'list', query: {word: searchWord}})
        },
        ...mapActions({
            GetAssociation: 'search/getAssociation'
        })
    },
    components: {
        Search,
        Association
    }
}
</script>

<style>
</style>
